<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item .head{
            height: 35px;
            background-color: #005ea7;
            color: white;
            line-height: 35px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div style="width: 300px">
    <div class="item">
        <div id ='d1' class="head" onclick="show_c('d1')">菜单1</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容1</div>
            <div>内容1</div>
        </div>
    </div>
    <div class="item">
        <div id ='d2' class="head" onclick="show_c('d2')">菜单2</div>
        <div class="content hide">
            <div>内容2</div>
            <div>内容2</div>
            <div>内容2</div>
        </div>
    </div>
    <div class="item">
        <div id = 'd3' class="head" onclick="show_c('d3')">菜单3</div>
        <div class="content hide">
            <div>内容3</div>
            <div>内容3</div>
            <div>内容3</div>
        </div>
    </div>
</div>
<script>
    function show_c(niu) {
        var menu = document.getElementById(niu);
        var fir_menu = menu.parentElement.parentElement.children;
        for(var i=0;i<fir_menu.length;i++){
            var current_item =fir_menu[i];
            current_item.children[1].classList.add('hide')
        }
        menu.nextElementSibling.classList.remove('hide')
    }
</script>
</body>
</html>